<script setup>
	import { computed, ref, onMounted, getCurrentInstance } from 'vue'
	import { useStore } from 'vuex'
	import { useRoute } from 'vue-router'
	import adminConfig from '/src/_config/admin.config.js'
	import EventCenter from '/src/_util/publish-subscribe.js'
	
    import AsideMenu from '/src/components/main/aside-menu.vue'
    import Header from '/src/components/main/header.vue'
    import Pagetags from '/src/components/main/pagetags.vue'
	
	const store = useStore()
	const route = useRoute()
	
	// keep-alive组件实例
	let keepAlive = ref()
	onMounted(() => {
		console.log(keepAlive)
		EventCenter.addEvent('closeTag', (tagName) => {
			if (adminConfig.cacheMode == 2 || adminConfig.cacheMode == 3) {
				keepAlive.value._.__v_cache?.delete(tagName)
			}
		})
	})
	
	// 是否显示菜单
	const showMenu = computed(() => store.state.app.showMenu) 
</script>

<template>
    <el-container class="outer-container">
		<el-aside
			class="left-aside"
			:class="[showMenu == 1 ? 'show' : 'hide']"
			width="auto"
		>
			<AsideMenu />
		</el-aside>
        <el-container class="inner-container">
            <el-header class="up-header" height="50px">
                <Header />
            </el-header>
			<div class="page-tags-wrap">
				<Pagetags />
			</div>
            <el-main>
				<router-view
					v-slot="{ Component }"
					v-if="adminConfig.cacheMode == 1 || adminConfig.cacheMode == 3"
				>
					<keep-alive ref="keepAlive">
						<component :is="Component" :key="route.name" v-if="route.meta.keepAlive" />
					</keep-alive>
					<component :is="Component" :key="route.name" v-if="!route.meta.keepAlive" />
				</router-view>
				
				<router-view
					v-slot="{ Component }"
					v-if="adminConfig.cacheMode == 2"
				>
					<keep-alive ref="keepAlive">
						<component :is="Component" :key="route.name" />
					</keep-alive>
				</router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<style scoped lang="less">
    .outer-container {
        width: 100%;
        height: 100%;
		.left-aside {
		    background: #304156;
			transition: all 0.3s;
		}
        .inner-container {
			background: #eee;
            .up-header {
                padding: 0 10px;
                background: #e9eef3;
				display: flex;
				align-items: center;
            }
			.page-tags-wrap {
				background: #fafafa;
			}
			.el-main {
				padding: 10px;
			}
        }
    }
	
	@media screen and (max-width: 768px) {
		.left-aside {
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			z-index: 99;
			&.hide {
				transform: translateX(-100%);
			}
		}
		.inner-container {
			.page-tags-wrap {
				display: none;
			}
			.el-main {
				padding: 5px !important;
			}
		}
	}
</style>